<template>
  <div class="btn_warp" style="height:32px;width: 100%;padding-top: 5px;padding-bottom: 10px">
    <el-input v-model="search1" clearable placeholder="按日期进行查询" style="width: 250px;margin-right: 30px;margin-left: 30px"/>
    <el-input v-model="search2" clearable placeholder="按账单状态查询" style="width: 250px;margin-right: 30px"/>
    <el-input v-model="search3" clearable placeholder="按缴费截止日期查询" style="width: 250px;margin-right: 30px"/>
    <el-button type="success" style="float: right;margin-right: 50px" @click.prevent="handleSearch">查询</el-button>
    <el-button type="success" style="float: right;margin-right: 10px" @click.prevent="handleClean">全部清空</el-button>
  </div>
  <el-table :data="filterTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe border style="width: 1200px;margin: 0 auto" max-height="472" height="472" :cell-style="{ textAlign: 'center' }">
    <el-table-column prop="" label="序号" width="70" :show-overflow-tooltip="true">
      <template #default="scope">
        {{scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column prop="feeDate" label="日期" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.feeDate }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="propertyAddress" label="房产地址" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.propertyAddress }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="feeStatus" label="账单状态" width="100" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.feeStatus }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="feeTotal" label="总计应缴(元)" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.feeTotal }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfee" label="水费(元)" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.waterfee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="electricityfee" label="电费(元)" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.electricityfee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="gasfee" label="气费(元)" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.gasfee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="feeManagefee" label="管理费用(元)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.feeManagefee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="feeEnddate" label="缴费截止日期" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.feeEnddate }}</span>
      </template>
    </el-table-column>
  </el-table>
  <div class="page_warp">
    <el-pagination  background @current-change="handleCurrentChange" v-model:page-size="pageSize" v-model:current-page="currentPage" layout="prev, pager, next , jumper" :total="filterTableData.length"></el-pagination>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
import axios from "axios";
export default {
  name: "HouseHold",
  setup(){
    const tableSels=ref([])
    const tableData = ref([])
    const pageSize=ref(10)
    const currentPage=ref(1)
    const statusOptions=[
      {
        value:'未缴清',
        label:'未缴清'
      },
      {
        value:'已逾期',
        label:'已逾期'
      },
      {
        value:'已缴清',
        label:'已缴清'
      }
    ]
    const search1=ref('')
    const search2=ref('')
    const search3=ref('')
    //条件过滤
    let filterTableData =ref([])

    //按条件进行查询
    function handleSearch(){
      filterTableData.value=tableData.value.filter(
          (data) => data.feeDate.toLowerCase().includes(search1.value.toLowerCase()) //匹配日期
              && data.feeStatus.toLowerCase().includes(search2.value.toLowerCase()) //匹配账单状态
              && data.feeEnddate.toLowerCase().includes(search3.value.toLowerCase()) //匹配缴费截止日期
      )
    }
    //清空查询条件
    function handleClean(){
      search1.value=''
      search2.value=''
      search3.value=''
    }
    //分页事件
    function handleCurrentChange(value){
      currentPage.value = value;
    }
    //挂载加载数据
    onMounted(()=>{
      axios.get('http://localhost:8085/getfeeByAddress',{
        params:{
          address:JSON.parse(sessionStorage.getItem("user")).username
        }
      }).then(
          (response)=>{
            tableData.value=response.data
            filterTableData.value=response.data
          },
          (message)=>{
            console.log(message)
          }
      )
    })

    return{
      tableSels,
      tableData,
      filterTableData,
      search1,
      search2,
      search3,
      pageSize,
      currentPage,
      handleCurrentChange,
      statusOptions,
      handleSearch,
      handleClean
    }
  }
}
</script>

<style scoped>
  .el-table{
    /*padding: 20px 20px 20px 20px;*/
  }
  .page_warp{
    width: 600px;
    margin: 5px auto;
    height: 40px;
  }
  .el-pagination{
    margin-right: 50px;
  }
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }
</style>